<!-- 申请成为顾问 详情组件 --> 
<template>
  <view>
    <view class="px-4 pb-20">
      <u-form :model="formData" ref="form" :label-style="labelStyle" label-width="180" :error-type="state.errorType">
        <u-form-item label="姓名" required prop="name">
          <u-input v-model="formData.name" :placeholder-style="placeholderStyle" :custom-style="inputStyle"
            :placeholder="formRules.name[0].message" />
        </u-form-item>
        <u-form-item label="公司">
          <u-input v-model="formData.company_name" :placeholder-style="placeholderStyle" :custom-style="inputStyle"
            placeholder="输入您所在企业全称" />
        </u-form-item>
        <u-form-item label="职位" required prop="position">
          <u-input v-model="formData.position" :placeholder-style="placeholderStyle" :custom-style="inputStyle"
            :placeholder="formRules.position[0].message" />
        </u-form-item>
        <u-form-item label="常驻地区" required prop="region" right-icon="arrow-right">
          <u-input v-model="formData.region" disabled :placeholder-style="placeholderStyle" :custom-style="inputStyle"
            :placeholder="formRules.region[0].message" @click="state.showRegionPicker = true" />
          <!-- 地区选择 -->
          <z-region-picker :show="state.showRegionPicker" title="选择常驻地区" @close="state.showRegionPicker = false"
            @confirm="onRegionConfirm" />
        </u-form-item>
        <u-form-item label="擅长领域" required prop="expertiseList" right-icon="arrow-right">
          <u-input :modelValue="expertiseName" disabled :placeholder-style="placeholderStyle" :custom-style="inputStyle"
            placeholder="请选择擅长领域" @click="state.showFieldPicker = true" />
          <field-select-picker :show="state.showFieldPicker" :data="formData.expertiseList"
            @close="state.showFieldPicker = false" @confirm="onFieldConfirm" />
        </u-form-item>
        <u-form-item label="课程主题" required prop="course_theme">
          <u-input v-model="formData.course_theme" :placeholder-style="placeholderStyle" :custom-style="inputStyle"
            :placeholder="formRules.course_theme[0].message" />
        </u-form-item>
        <view class="flex min-h-260 pt-3">
          <view class="flex-shrink-0 mt-1 ml--2 w-196">
            <view class="c-#333 text-28 font-bold label-left"><text class="pt-0.75 c-#FF513A">*</text>自我介绍</view>
          </view>
          <view class="flex-1 flex justify-end relative">
            <u-input v-model="formData.self_desc" maxlength="500" type="textarea" style="width: 100%;" height="180"
              :auto-height="true" :placeholder-style="placeholderStyle" :custom-style="textAreaStyle"
              placeholder="干练又丰富的个人简介更受欢迎哦~" />
          </view>
        </view>
        <view class="flex justify-end mb-3 z-2 c-#999 text-24">{{ enteredNum }}/500</view>
        <u-line color="#F5F5F5" :hair-line="false" />
        <view class="flex h-200">
          <view class="flex-shrink-0">
            <view class="c-#333 text-28 mt-3 font-bold label-left"><text class="c-#FF513A">*</text>BANNER图</view>
            <view class="mt-1 c-#F4AF22 text-24">尺寸为700*400</view>
          </view>
          <view class="flex-1 flex items-center justify-end">
            <z-file-upload ref="bannerUploader" :fileList="bannerImages" width="252" height="144" maxCount="1" />
            <!-- <z-file-upload ref="bannerUploader" :fileList="bannerImages" width="252" height="144" maxCount="1" /> -->
          </view>
        </view>
        <u-line color="#F5F5F5" :hair-line="false" />
        <view class="flex min-h-200">
          <view class="flex-shrink-0">
            <view class="c-#333 text-28 mt-3 font-bold label-left">
              <text class="c-#FF513A">*</text>
              <text>其他资质({{ qualifiyUploadCount }}/6)</text>
            </view>
            <view class="mt-1 c-#F4AF22 text-24">仅作为审核参考</view>
          </view>
          <view class="flex-1 flex items-center justify-end">
            <z-file-upload ref="qualifiyUploader" :fileList="qualifiyImages" width="144" height="144" maxCount="6" />
          </view>
        </view>
      </u-form>
    </view>
    <view class="h-150 bottom-wrap-16 bg-white">
      <u-line class="w-full" color="#eee" :hair-line="false" />
      <view class="btn-submit mt-1" @click="onSubmit">提交申请</view>
    </view>

  </view>
</template>

<script setup>
import { showToast } from '@/common/util/uni.js'
import { getExpertiseList } from '@/common/http/module/common'
import { postAdviserAdd } from '@/common/http/module/user'

const props = defineProps({
  data: Object
})

const state = reactive({
  showRegionPicker: false,
  showFieldPicker: false,
  errorType: ['toast'],
  fieldList: [],
  url: '',
  urlData: ''
})

const formData = reactive({
  name: '',
  company_name: '',
  position: '',
  region: '',
  province: '',
  city: '',
  area: '',
  expertiseList: '',
  self_desc: '',
  course_theme: '',
  banner: '',
  other_qualifications: ''
})

const formRules = {
  name: [{ required: true, message: '请输入姓名', trigger: ['blur', 'change'] }],
  position: [{ required: true, message: '输入您职位', trigger: ['blur', 'change'] }],
  course_theme: [{ required: true, message: '输入您擅长的课程主题', trigger: ['blur', 'change'] }],
  region: [{ required: true, message: '请选择常驻地区', trigger: ['blur', 'change'] }],
}

// 表单label样式
const placeholderStyle = "fontSize: '28rpx', color: '#999'"
const labelStyle = {
  fontFamily: 'PingFang SC',
  color: '#333333',
  fontSize: '28rpx',
  fontWeight: 'bold'
}
const inputStyle = {
  color: '#333',
  fontSize: '28rpx',
}

const textAreaStyle = {
  color: '#333',
  fontSize: '28rpx',
  paddingBottom: '0rpx'
}

const form = ref()
const bannerUploader = ref()
const qualifiyUploader = ref()

const bannerImages = ref([])
const qualifiyImages = ref([])

const enteredNum = computed(() => formData.self_desc.length > 500 ? 500 : formData.self_desc.length)
const qualifiyUploadCount = computed(() => qualifiyUploader.value?.getList()?.length || 0)
const expertiseName = computed(() => {
  if (!formData.expertiseList || formData.expertiseList.length == 0) return ''
  return formData.expertiseList.map(item => item.expertise_name).join(',')
})

function loadData() {
  state.loading = true
  getExpertiseList().then(res => {
    state.fieldList = res.data?.map(item => {
      return {
        label: item.expertise_name,
        value: item.id
      }
    })
    console.log('getExpertiseList', state.fieldList);
  })
}

function backFillFormData() {
  if (!props.data) return
  formData.name = props.data.name
  formData.company_name = props.data.company_name
  formData.position = props.data.position
  formData.province = props.data.province
  formData.city = props.data.city
  formData.area = props.data.area
  formData.self_desc = props.data.self_desc
  formData.course_theme = props.data.course_theme
  formData.banner = props.data.banner
  formData.other_qualifications = props.data.other_qualifications
  formData.region = props.data.address
  formData.expertiseList = props.data.expertise_ids.split(',').map((item, index) => {
    return {
      id: item,
      expertise_name: props.data.expertise[index]
    }
  })
  bannerImages.value = props.data.banner.map(item => {
    return { url: item }
  })
  qualifiyImages.value = props.data.other_qualifications.map(item => {
    return { url: item }
  })
}

// 地区选择
function onRegionConfirm(e) {
  console.log('onRegionConfirm', e);
  const { province, city, area } = e
  formData.province = province.id
  formData.city = city.id
  formData.area = area?.id
  formData.region = province.name + city.name + area?.name
}

// 领域选择
function onFieldConfirm(e) {
  formData.expertiseList = e
}

function onSubmit() {
  form.value.validate(valid => {
    if (!valid) return
    if (formData.expertiseList.length == 0) {
      showToast('请选择擅长领域', 'none')
      return
    }

    if (!bannerUploader.value.isAllUploaded()) return
    if (!qualifiyUploader.value.isAllUploaded()) return

    const bannerImageList = bannerUploader.value.getUploadedList()
    if (bannerImageList.length == 0) {
      showToast('请先上传BANNER图', 'none')
      return
    }
    const qualifiyImageList = qualifiyUploader.value.getUploadedList()
    if (qualifiyImageList.length == 0) {
      showToast('请先上传其他资质', 'none')
      return
    }

    const params = {
      ...formData,
      expertise_ids: formData.expertiseList.map(item => item.id).join(','),
      banner: bannerImageList[0].serverUrl,
      other_qualifications: qualifiyImageList.map(item => item.serverUrl).join(',')
    }
    console.log('onSubmit', params);
    postAdviserAdd(params).then(() => {
      showToast('已提交申请')
      setTimeout(() => uni.navigateBack(), 600)
    })
  })
}

onMounted(() => {
  loadData()
  backFillFormData()
})

onReady(() => {
  nextTick(() => form.value.setRules(formRules))
})
</script>

<style lang='scss' scoped>
.option-item {
  display: flex;
  color: #333;
  font-size: 28rpx;
  font-family: PingFangSC-Medium;
}

.bg-audit {
  background-color: #F4AF22;
}

.bg-fail {
  background-color: #FF513A;
}

.bg-success {
  background-color: #3FB352;
}
</style>
